<template>
  <div class="cn-text-block-wrapper">
    <div class="cn-text-block">
      <!-- 对齐方式：靠左、居中、靠右 -->
      <div :style="cnBlockContainerStyle">
        <cn-text-block-elements :elements="block.elements" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CSSProperties, PropType, toRefs } from 'vue';
import { type CnBlock } from '../types';
import { getAlign } from '../util';
import CnTextBlockElements from './cn-elements/cn-elements.vue';

const props = defineProps({
  block: {
    type: Object as PropType<CnBlock>,
    required: true,
  },
});
const { block } = toRefs(props);

const cnBlockContainerStyle = computed((): CSSProperties => {
  return { textAlign: getAlign(block.value.style) };
});
</script>
